<template>
  <div class="archives-page">
    <header class="page-header">
      <div class="title">档案</div>
      <div class="subtitle">常用基础档案与属性配置</div>
    </header>

    <section class="grid">
      <div class="group" v-for="grp in groups" :key="grp.name">
        <div class="group-title">{{ grp.name }}</div>
        <div class="items">
          <button class="item" v-for="it in grp.items" :key="it.path" @click="go(it.path)">
            <span class="item-name">{{ it.title }}</span>
            <span class="item-path">{{ it.path }}</span>
          </button>
        </div>
      </div>
    </section>
  </div>
  
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const groups = [
  {
    name: '系统档案',
    items: [
      { title: '商品档案', path: '/mall/catalog' },
      { title: '颜色管理', path: '/mall/colors' },
      { title: '尺码管理', path: '/mall/sizes' },
      { title: '吊牌/条码', path: '/mall/tags' },
      { title: '设备与打印', path: '/mall/devices' },
    ]
  },
  {
    name: '仓库与库存属性',
    items: [
      { title: '库存查询', path: '/mall/inventory' },
      { title: '盘点任务', path: '/mall/stocktake' },
      { title: '损益处理', path: '/mall/loss' },
      { title: '调拨单', path: '/mall/transfers' },
      { title: '补货单', path: '/mall/replenishments' },
    ]
  },
  {
    name: '供应与采购',
    items: [
      { title: '供应商', path: '/mall/suppliers' },
      { title: '采购单', path: '/mall/purchase' },
      { title: '退货单', path: '/mall/returns' },
    ]
  },
  {
    name: '客户档案',
    items: [
      { title: '会员中心', path: '/mall/members' },
      { title: '会员等级', path: '/mall/member-tiers' },
      { title: '积分规则', path: '/mall/points' },
      { title: '储值管理', path: '/mall/stored-value' },
    ]
  },
  {
    name: '门店与权限',
    items: [
      { title: '门店资料', path: '/mall/stores' },
      { title: '收银点', path: '/mall/registers' },
      { title: '员工与权限', path: '/mall/users' },
    ]
  },
  {
    name: '报表与分析',
    items: [
      { title: '销售分析', path: '/mall/report-sales' },
      { title: '款色尺码结构', path: '/mall/report-matrix' },
      { title: '季节动销', path: '/mall/report-season' },
      { title: '库存老化', path: '/mall/report-aging' },
      { title: '店员绩效', path: '/mall/report-staff' },
    ]
  },
]

function go(path) { router.push(path) }
</script>

<style scoped>
.archives-page { padding: 16px; }
.page-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.title { font-weight: 700; font-size: 18px; color: #111827; }
.subtitle { color: #6b7280; font-size: 12px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.group { background: #fff; border: 1px solid #eef1f5; border-radius: 10px; padding: 12px; }
.group-title { font-weight: 600; color: #111827; margin-bottom: 10px; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.item { text-align: left; border: 1px solid #eef1f5; border-radius: 8px; padding: 10px; background: #f8fafc; cursor: pointer; }
.item:hover { background: #f1f5f9; }
.item-name { display: block; color: #111827; font-weight: 600; }
.item-path { display: block; color: #6b7280; font-size: 12px; margin-top: 2px; }

@media (max-width: 1200px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }
</style>


